<template>
    <!-- components/custom-navbar/index.wxml -->
    <view
        :class="'custom-navbar ' + (isHomePage ? 'home-navbar' : '') + ' ' + (isCoverNav ? 'fixed' : '')"
        :style="'background-color: ' + backgroundColor + '; color: ' + textColor"
    >
        <!-- 状态栏占位 -->
        <view class="status-bar" :style="'height: ' + statusBarHeight + 'px;'"></view>
        <!-- 导航栏内容 -->
        <view class="navbar-content" :style="'height: ' + navBarHeight + 'px;'">
            <!-- 左侧返回按钮 -->
            <view class="navbar-left" v-if="showBack" @tap="onBack">
                <image src="https://image.shengxuankj.com/fronts/back_black.png" mode="" class="back-icon" />
                <!-- <text class="back-icon"> ‹ </text> -->
            </view>
            <!-- 左侧标题（与胶囊对齐） -->
            <view class="navbar-left-title" v-if="leftTitle">
                <text class="navbar-left-title-text">{{ leftTitle }}</text>
            </view>
            <view class="navbar-left-title" v-if="showTitle">
                <image src="https://image.shengxuankj.com/fronts/logo.png" mode="" />
            </view>
            <!-- 中间标题 -->
            <view class="navbar-center" v-if="!leftTitle" :style="{width: `calc(100% - 30px - ${menuButtonInfo?.width}px)` }">
                <text class="navbar-title">{{ title }}</text>
            </view>
            <!-- 右侧操作区 -->
            <view class="navbar-right" v-if="showRight">
                <slot name="right"></slot>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';

// 类型定义
interface Props {
  title?: string;
  leftTitle?: string;
  backgroundColor?: string;
  textColor?: string;
  showBack?: boolean;
  isCoverNav?: boolean;
  isHomePage?: boolean;
  showTitle?: boolean;
  showRight?: boolean;
}

// Props定义
const props = withDefaults(defineProps<Props>(), {
  title: '',
  leftTitle: '',
  backgroundColor: 'transparent',
  textColor: '#ffffff',
  showBack: false,
  isCoverNav: false,
  isHomePage: false,
  showTitle: false,
  showRight: false
});

// 事件定义
const emit = defineEmits<{
  back: [];
}>();

// 响应式数据
const statusBarHeight = ref<number>(0);
const navBarHeight = ref<number>(44);

/**
 * 获取系统信息并设置导航栏高度
 */
const attached = (): void => {
  // 获取系统信息
  const systemInfo = uni.getWindowInfo();
  statusBarHeight.value = systemInfo.statusBarHeight;
  navBarHeight.value = systemInfo.platform === 'ios' ? 44 : 44;
  uni.setStorageSync('navHeight', statusBarHeight.value + navBarHeight.value);
};

/**
 * 返回按钮点击事件
 */
const onBack = (): void => {
  // 触发返回事件
  emit('back');

  // 默认返回行为
  const pages = getCurrentPages();
  if (pages.length > 1) {
    uni.navigateBack();
  } else {
    uni.switchTab({
      url: '/pages/index/index'
    });
  }
};

/**
 * 组件挂载时初始化
 */
const menuButtonInfo = ref({
    width: 87
})
onMounted(() => {
  // 处理小程序 attached 生命周期
  attached();
    // 获取微信小程序的胶囊信息
    menuButtonInfo.value = uni.getMenuButtonBoundingClientRect();
    console.log('menuButtonInfo', menuButtonInfo.value)
});

// 暴露给模板使用的变量和方法
defineExpose({
  statusBarHeight,
  navBarHeight,
  attached,
  onBack
});
</script>
<style>
/* components/custom-navbar/index.wxss */
.custom-navbar {
    position: initial !important;
}

.status-bar {
    width: 100%;
}

.navbar-content {
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    justify-content: flex-start;
    padding: 0 32rpx;
    position: relative;
}

.navbar-left {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60rpx;
    height: 60rpx;
    margin-right: 12rpx;
}

.back-icon {
    width: 100%;
    height: 100%;
}

.navbar-center {
    /* position: absolute; */
    /* left: 50%; */
    /* top: 50%; */
    /* transform: translate(-50%, -50%); */
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar-title {
    font-size: 36rpx;
    font-weight: 600;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.navbar-right {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60rpx;
    height: 60rpx;
}

.navbar-left-title {
    /* position: absolute; */
    /* top: 50%; */
    display: flex;
    align-items: center;
    height: 100%;
}
.navbar-left-title image {
    width: 129rpx;
    height: 33rpx;
}
.navbar-left-title-text {
    font-size: 32rpx;
    font-weight: 500;
    letter-spacing: 2rpx;
}

/* 首页导航栏样式 - 不占用页面空间 */
.home-navbar {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
}
.fixed {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    transition: background-color 0.3s ease;
}
</style>
